<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转账汇款 - 银行业务管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .navbar-brand {
            font-weight: bold;
            color: #fff !important;
        }
        
        .main-content {
            padding: 40px 20px;
        }
        
        .transfer-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 40px;
            margin-bottom: 30px;
            backdrop-filter: blur(10px);
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .btn-transfer {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            border: none;
            color: white;
            padding: 15px 40px;
            font-size: 1.2rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .btn-transfer:hover {
            background: linear-gradient(135deg, #f95d88 0%, #fed12d 100%);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn-transfer:disabled {
            background: #6c757d !important;
            transform: none !important;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .required {
            color: red;
        }
        
        .input-group-text {
            background-color: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .result-card {
            background: white;
            border-radius: 10px;
            padding: 40px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            display: none;
        }
        
        .transfer-amount {
            font-size: 2.5rem;
            font-weight: bold;
            color: #28a745;
            margin: 20px 0;
        }
        
        .transfer-info {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            text-align: left;
        }
        
        .security-tips {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 15px;
            margin-top: 20px;
            border-radius: 0 5px 5px 0;
        }
        
        .step-indicator {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .step {
            display: flex;
            align-items: center;
            margin: 0 10px;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #6c757d;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .step.active .step-number {
            background-color: #667eea;
        }
        
        .step.completed .step-number {
            background-color: #28a745;
        }
        
        .step-arrow {
            color: #6c757d;
            margin: 0 10px;
        }
        
        .card-display {
            font-family: 'Courier New', monospace;
            font-weight: bold;
            color: #007bff;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/customer">
                <i class="fas fa-university"></i>
                银行业务管理系统 - 客户服务
            </a>
            
            <div class="navbar-nav ml-auto">
                <a class="nav-link" href="/customer">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>
        </div>
    </nav>

    <div class="container main-content">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="transfer-card">
                    <div class="text-center mb-4">
                        <h2>
                            <i class="fas fa-paper-plane text-primary"></i>
                            转账汇款
                        </h2>
                        <p class="text-muted">安全、快捷的银行卡间资金转账服务</p>
                    </div>
                    
                    <!-- 步骤指示器 -->
                    <div class="step-indicator">
                        <div class="step active" id="step1">
                            <div class="step-number">1</div>
                            <span>填写信息</span>
                        </div>
                        <div class="step-arrow">
                            <i class="fas fa-arrow-right"></i>
                        </div>
                        <div class="step" id="step2">
                            <div class="step-number">2</div>
                            <span>确认转账</span>
                        </div>
                        <div class="step-arrow">
                            <i class="fas fa-arrow-right"></i>
                        </div>
                        <div class="step" id="step3">
                            <div class="step-number">3</div>
                            <span>转账完成</span>
                        </div>
                    </div>
                    
                    <!-- 转账表单 -->
                    <form id="transferForm" novalidate>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="fromCardId">转出银行卡号 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-credit-card"></i>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control" id="fromCardId" name="fromCardId" 
                                               required pattern="^[0-9]{16}$" placeholder="请输入转出银行卡号"
                                               maxlength="16">
                                    </div>
                                    <div class="invalid-feedback">请输入正确的16位银行卡号</div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="fromPassword">转出卡密码 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-lock"></i>
                                            </span>
                                        </div>
                                        <input type="password" class="form-control" id="fromPassword" name="fromPassword" 
                                               required pattern="^[0-9]{6}$" placeholder="请输入6位数字密码"
                                               maxlength="6">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-secondary" id="toggleFromPassword">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">请输入正确的6位数字密码</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="toCardId">转入银行卡号 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-credit-card"></i>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control" id="toCardId" name="toCardId" 
                                               required pattern="^[0-9]{16}$" placeholder="请输入转入银行卡号"
                                               maxlength="16">
                                    </div>
                                    <div class="invalid-feedback">请输入正确的16位银行卡号</div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="amount">转账金额 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">¥</span>
                                        </div>
                                        <input type="number" class="form-control" id="amount" name="amount" 
                                               required min="0.01" step="0.01" placeholder="请输入转账金额">
                                    </div>
                                    <div class="invalid-feedback">转账金额必须大于0</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="remark">转账备注</label>
                            <input type="text" class="form-control" id="remark" name="remark" 
                                   placeholder="请输入转账备注（可选）" maxlength="200">
                            <small class="form-text text-muted">备注信息将显示在交易记录中</small>
                        </div>
                        
                        <div class="text-center">
                            <button type="submit" class="btn btn-transfer" id="transferBtn">
                                <i class="fas fa-paper-plane"></i>
                                立即转账
                            </button>
                        </div>
                    </form>
                    
                    <!-- 加载动画 -->
                    <div class="loading">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">转账中...</span>
                        </div>
                        <p class="mt-2">正在处理转账，请稍候...</p>
                    </div>
                    
                    <!-- 安全提示 -->
                    <div class="security-tips">
                        <h6><i class="fas fa-shield-alt"></i> 转账安全提示</h6>
                        <ul class="mb-0">
                            <li>转账前请仔细核对收款人银行卡号</li>
                            <li>转账金额一旦确认将立即到账，无法撤销</li>
                            <li>请确保转出账户余额充足（转账后余额不少于1元）</li>
                            <li>如发现异常情况，请立即联系客服：400-888-8888</li>
                            <li>请勿向陌生人转账，谨防诈骗</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 转账结果 -->
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="result-card" id="resultCard">
                    <div class="mb-4">
                        <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                        <h3 class="mt-3 text-success">转账成功</h3>
                        <p class="text-muted">您的转账已成功完成</p>
                    </div>
                    
                    <div class="transfer-amount" id="transferAmount">¥0.00</div>
                    
                    <div class="transfer-info">
                        <div class="row mb-2">
                            <div class="col-4"><strong>转出卡号：</strong></div>
                            <div class="col-8 card-display" id="displayFromCard">****</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-4"><strong>转入卡号：</strong></div>
                            <div class="col-8 card-display" id="displayToCard">****</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-4"><strong>转账时间：</strong></div>
                            <div class="col-8" id="transferTime">--</div>
                        </div>
                        <div class="row">
                            <div class="col-4"><strong>转账备注：</strong></div>
                            <div class="col-8" id="transferRemark">--</div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <button type="button" class="btn btn-outline-primary mr-2" onclick="transferAgain()">
                            <i class="fas fa-redo"></i> 再次转账
                        </button>
                        <a href="/customer/trades" class="btn btn-outline-success">
                            <i class="fas fa-history"></i> 查看交易记录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(document).ready(function() {
            // 密码显示/隐藏切换
            $('#toggleFromPassword').click(function() {
                const passwordField = $('#fromPassword');
                const icon = $(this).find('i');

                if (passwordField.attr('type') === 'password') {
                    passwordField.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    passwordField.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });

            // 银行卡号输入格式化
            $('#fromCardId, #toCardId').on('input', function() {
                let value = $(this).val().replace(/\D/g, '');
                if (value.length > 16) {
                    value = value.substring(0, 16);
                }
                $(this).val(value);
            });

            // 密码输入格式化
            $('#fromPassword').on('input', function() {
                let value = $(this).val().replace(/\D/g, '');
                if (value.length > 6) {
                    value = value.substring(0, 6);
                }
                $(this).val(value);
            });

            // 转出卡号和转入卡号不能相同
            $('#fromCardId, #toCardId').on('blur', function() {
                const fromCardId = $('#fromCardId').val().trim();
                const toCardId = $('#toCardId').val().trim();

                if (fromCardId && toCardId && fromCardId === toCardId) {
                    showError('转出卡号和转入卡号不能相同');
                    $(this).focus();
                }
            });

            // 表单提交
            $('#transferForm').on('submit', function(e) {
                e.preventDefault();

                const form = this;
                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    return;
                }

                // 验证转出卡号和转入卡号不能相同
                const fromCardId = $('#fromCardId').val().trim();
                const toCardId = $('#toCardId').val().trim();

                if (fromCardId === toCardId) {
                    showError('转出卡号和转入卡号不能相同');
                    return;
                }

                // 确认转账
                confirmTransfer();
            });
        });

        // 确认转账
        function confirmTransfer() {
            const fromCardId = $('#fromCardId').val().trim();
            const toCardId = $('#toCardId').val().trim();
            const amount = $('#amount').val();
            const remark = $('#remark').val().trim();

            const confirmMessage = `请确认转账信息：\n\n` +
                `转出卡号：${maskCardId(fromCardId)}\n` +
                `转入卡号：${maskCardId(toCardId)}\n` +
                `转账金额：¥${formatMoney(amount)}\n` +
                `转账备注：${remark || '无'}\n\n` +
                `确认转账吗？转账后无法撤销！`;

            if (confirm(confirmMessage)) {
                processTransfer();
            }
        }

        // 处理转账
        function processTransfer() {
            const fromCardId = $('#fromCardId').val().trim();
            const fromPassword = $('#fromPassword').val().trim();
            const toCardId = $('#toCardId').val().trim();
            const amount = $('#amount').val();
            const remark = $('#remark').val().trim();

            // 更新步骤指示器
            updateStep(2);

            // 显示加载动画
            showLoading(true);
            $('#transferBtn').prop('disabled', true);

            // 发送转账请求
            $.ajax({
                url: '/customer/transfer',
                method: 'POST',
                data: {
                    fromCardId: fromCardId,
                    fromPassword: fromPassword,
                    toCardId: toCardId,
                    amount: amount,
                    remark: remark
                }
            })
            .done(function(result) {
                if (result.code === 200) {
                    // 转账成功
                    updateStep(3);
                    showResult(fromCardId, toCardId, amount, remark);
                } else {
                    // 转账失败
                    updateStep(1);
                    showError(result.message);
                }
            })
            .fail(function(xhr) {
                updateStep(1);
                if (xhr.status === 400) {
                    const response = xhr.responseJSON;
                    showError(response ? response.message : '请求参数错误');
                } else {
                    showError('网络请求失败，请检查网络连接');
                }
            })
            .always(function() {
                showLoading(false);
                $('#transferBtn').prop('disabled', false);
            });
        }

        // 显示转账结果
        function showResult(fromCardId, toCardId, amount, remark) {
            $('#transferAmount').text('¥' + formatMoney(amount));
            $('#displayFromCard').text(maskCardId(fromCardId));
            $('#displayToCard').text(maskCardId(toCardId));
            $('#transferTime').text(formatDateTime(new Date()));
            $('#transferRemark').text(remark || '无');

            // 隐藏表单，显示结果
            $('.transfer-card').fadeOut(300, function() {
                $('#resultCard').fadeIn(300);
            });
        }

        // 再次转账
        function transferAgain() {
            $('#resultCard').fadeOut(300, function() {
                $('.transfer-card').fadeIn(300);
                $('#transferForm')[0].reset();
                $('#transferForm').removeClass('was-validated');
                updateStep(1);
            });
        }

        // 更新步骤指示器
        function updateStep(currentStep) {
            // 重置所有步骤
            $('.step').removeClass('active completed');

            // 设置当前步骤
            for (let i = 1; i <= 3; i++) {
                if (i < currentStep) {
                    $(`#step${i}`).addClass('completed');
                } else if (i === currentStep) {
                    $(`#step${i}`).addClass('active');
                }
            }
        }

        // 显示/隐藏加载动画
        function showLoading(show) {
            if (show) {
                $('#transferForm').hide();
                $('.loading').show();
            } else {
                $('.loading').hide();
                $('#transferForm').show();
            }
        }

        // 显示错误信息
        function showError(message) {
            const alertHtml = `
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle"></i>
                    ${message}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            `;

            $('.transfer-card').prepend(alertHtml);

            setTimeout(function() {
                $('.alert').alert('close');
            }, 5000);
        }

        // 工具函数
        function formatMoney(amount) {
            if (amount == null || amount === '') return '0.00';
            return parseFloat(amount).toFixed(2);
        }

        function maskCardId(cardId) {
            if (!cardId || cardId.length !== 16) return cardId;
            return cardId.substring(0, 4) + ' **** **** ' + cardId.substring(12);
        }

        function formatDateTime(date) {
            return date.getFullYear() + '-' +
                   String(date.getMonth() + 1).padStart(2, '0') + '-' +
                   String(date.getDate()).padStart(2, '0') + ' ' +
                   String(date.getHours()).padStart(2, '0') + ':' +
                   String(date.getMinutes()).padStart(2, '0') + ':' +
                   String(date.getSeconds()).padStart(2, '0');
        }
    </script>
</body>
</html>
